<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clear</title>
    <style>
        .clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;}
        .clearfix{*zoom:1;}
    </style>
</head>
<body>
<!--默认margin是撑不开自己的父元素的,但能影响到外界元素
<div style="background:red;">
    <div style="margin:100px;"></div>
</div>-->

1. 通过clear属性清除浮动,与外界元素仍存在margin合并现象(没错仍然会穿透,也可以说是和先和父元素发生了margin合并),margin不会撑开自己的父元素
<div style="background-color: #f5f5f5;">
    <img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left;">
    <div style="clear:both; margin-bottom:100px;">clear:both; <em>这个用于clear的div的margin-bottom:100px和下面文字理图片的margin-top:100px发生了重叠</em></div>
</div>
<div style="margin-top: 100px;">本文字离图片的距离是？</div>
<br><br><br><br>
2. overflow触发bfc,bfc也能清楚浮动,且不会存在与外界的margin发生合并的现象(子元素的margin能撑开父元素)
<div style="background-color: #f5f5f5; overflow: hidden;">
    <img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left; margin-bottom: 100px;">
</div>
<div style="margin-top: 100px;">本文字离图片的距离是？</div>
</body>
</html>
